<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />

    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }

      main {
        padding: 20px;
      }

      /* 媒体查询，针对小屏幕设备（如手机） */
      @media (max-width: 600px) {
        header {
          padding: 10px;
        }

        main {
          padding: 10px;
        }
      }
    </style>
  </head>

  <!-- 引入 Vant 的样式文件 -->
  <link
    rel="stylesheet"
    href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"
  />
  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@3.5.13/dist/vue.global.min.js"></script>

  <script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
  <!-- 引入 formCreate -->
  <script src="/hybrid/html/js/form-create.min.js"></script>
  <script type="text/javascript">
    var userAgent = navigator.userAgent;
    if (userAgent.indexOf("AlipayClient") > -1) {
      // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
      document.writeln(
        '<script src="https://appx/web-view.min.js"' +
          ">" +
          "<" +
          "/" +
          "script>"
      );
    } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
      // QQ 小程序
      document.write(
        '<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
      );
    } else if (
      /miniProgram/i.test(userAgent) &&
      /micromessenger/i.test(userAgent)
    ) {
      // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
      document.write(
        '<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>'
      );
    } else if (/toutiaomicroapp/i.test(userAgent)) {
      // 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
      document.write(
        '<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>'
      );
    } else if (/swan/i.test(userAgent)) {
      // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
      document.write(
        '<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
      );
    } else if (/quickapp/i.test(userAgent)) {
      // quickapp
      document.write(
        '<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>'
      );
    }
  </script>
  <!-- uni 的 SDK -->
  <!-- 需要把 uni.webview.1.5.6.js 下载到自己的服务器 -->
  <script
    type="text/javascript"
    src="/hybrid/html/js/uni.webview.1.5.6.js"
  ></script>
  <script type="text/javascript">
    // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
    window.addEventListener("UniAppJSBridgeReady", function () {
      uni.postMessage({
        data: {
          action: "message",
        },
      });
      uni.getEnv(function (res) {
        console.log("当前环境：" + JSON.stringify(res));
      });
    });
  </script>
  <div id="app">
    <form-create-mobile
      :rule="rule"
      v-model:api="fApi"
      v-model="formData"
      :option="options"
    />
  </div>

  <script>
    const { createApp, ref, onMounted } = Vue;

    createApp({
      setup() {
        const message = ref("Hello vue!");
        const fApi = ref({});
        const formData = ref({});
        const options = ref({});
        const rule = ref([]);
        const id = ref(""); //对应的提交表单ID
        const type = ref(""); //表单类型
        const memberId = ref(undefined); //会员id
        // 编码表单 Conf
        const encodeConf = (Conf) => {
          // @ts-ignore
          return JSON.stringify(Conf);
        };

        // 编码表单 Fields
        const encodeFields = (rule) => {
          // @ts-ignore

          const fields = [];
          rule.forEach((item) => {
            fields.push(JSON.stringify(item));
          });
          return fields;
        };
        const decodeFields = (fields) => {
          const rule = [];
          fields.forEach((item) => {
            rule.push(JSON.parse(item));
          });
          return rule;
        };
        const sumbit = (e) => {
          let params = {
            id: Number(id.value),
            type: Number(type.value),
            memberId: memberId.value,
            conf: encodeConf(options.value),
            fields: encodeFields(rule.value),
          };
          uni.postMessage({
            data: {
              action: "sumbit",
              formData: params,
            },
          });
          // #ifdef MP-WEIXIN
          uni.navigateBack();
          // #endif
        };

        const setConfig = (item) => {
          // 表单整体属性值，通过组件属性注入
          options.value = JSON.parse(item.conf);
          options.value = Object.assign(options.value, {
            onSubmit: (formData) => {
              sumbit(formData);
              // alert(JSON.stringify(formData)); // 提交表单时弹出表单数据
            },
          });

          // 表单内各组件，需要通过方法来设值，因为设值后，需要动态生成表单验证内容
          rule.value = decodeFields(item.fields);
        };
        onMounted(() => {
          window.onload = function () {
            const urlParams = new URLSearchParams(window.location.search);
            id.value = urlParams.get("id");
            type.value = urlParams.get("type");
            memberId.value = urlParams.get("memberId");
            const formJson = urlParams.get("formJson");
            setConfig(JSON.parse(formJson));
          };
        });

        return {
          message,
          fApi,
          formData,
          options,
          rule,
        };
      },
    })
      .use(vant)
      .use(formCreateMobile)
      .mount("#app");
  </script>
</html>
